<template>
        <div>
          <h1>自定义指令</h1>
          <hr />
          <input type="text" v-focus />
        </div>
      </template>
      
<script setup lang="ts">
type DirectiveFactory = (el: HTMLElement, binding: DirectiveBinding, vnode: VNode, prevVnode: VNode | null) => void;

interface DirectiveBinding {  
  instance: any; // the current Vue instance  
  value: any; // the value passed to the directive  
  oldValue: any; // the previous value, only in update and componentUpdated hooks  
  arg: string; // the argument passed to the directive (could be a static argument or a dynamic expression)  
  modifiers: Record<string, boolean>; // modifiers for the directive, e.g. v-my-directive.foo, v-my-directive.bar  
  dir: DirectiveFactory; // the directive factory function that created the directive binding  
}  
  
interface VNode {  
  // many properties...  
}

  interface DirectiveBinding {  
  instance: any; // the current Vue instance  
  value: any; // the value passed to the directive  
  oldValue: any; // the previous value, only in update and componentUpdated hooks  
  arg: string; // the argument passed to the directive (could be a static argument or a dynamic expression)  
  modifiers: Record<string, boolean>; // modifiers for the directive, e.g. v-my-directive.foo, v-my-directive.bar  
  dir: DirectiveFactory; // the directive factory function that created the directive binding  
}  
  
interface VNode {  
  // many properties...  
}
      const vFocus = {
        mounted(el: HTMLElement, binding: DirectiveBinding, vnode: VNode, prevVnode: VNode | null) {  
          el?.focus()
        // 参考文档查看各个参数的细节
        console.log('el', el,binding, vnode, prevVnode);
      },
      };
 </script>
      